<template>
	<view>
		<view class="coupon-cat" :class="status ? 'couponColor' : ''">
			<view class="coupon-list">
				<view class="coupon-list_left">
					<view class="coupon-list_leftFont">
						<text class="one">{{getData.price}}</text>
						<text class="two">{{getData.satisfy_name}}</text>
					</view>
				</view>
				<text class="coupon-text"></text>
				<view class="coupon-list_right">
					<view class="coupon-list_rightImg">
						<text>{{getData.name}}</text>
					</view>
					<text class="coupon-list_righttext">有效期至{{getData.end_date}}</text>
					<view class="coupon-list_rightTitle">
						<view class="coupon-list_rightTitle-left" @tap="$emit('Tips',index)">
							<text>使用说明</text>
							<image v-if="!getData.tipsShow" :src="Url+'add_images/more-down.png'" mode="widthFix"></image>
							<image v-else :src="Url+'add_images/more-up.png'" mode="widthFix"></image>
						</view>
						<!-- <view class="coupon-list_rightTitle-btn">立即领取</view> -->
						<text v-if="!status && getData.day < 4" class="coupon-list_rightTitle-text">仅剩{{getData.day}}天</text>
						<image v-else-if="status == 1" class="coupon-pos" src="../../static/image/index/add_images/use_pic.png" mode="widthFix"></image>
						<image v-else-if="status == 2" class="coupon-pos" src="../../static/image/index/add_images/del_pic.png" mode="widthFix"></image>
						
					</view>
				</view>
			</view>
			<!-- 隐藏-->
			<view class="coupon-hide" v-if="getData.tipsShow">
				<p>{{getData.memo}}</p>
				<p>{{getData.text}}</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			status:{
				type:[Number || String],
				default:0
			},
			getData:{
				type:Object
			},
			index:{
				type:Number
			}
		},
		data() {
			return {
				Url:this.Imgurl
			};
		},
		methods:{
			
		}
	}
</script>

<style lang="scss">
	$allcolor:#333333;
	$allcolorT:#999999;
	.couponColor{
		.coupon-list_left{
			.one{
				color:$allcolorT;
			}
			.two{
				color:$allcolorT;
			}
		}
		.coupon-list_rightImg{
			text{
			   color:$allcolorT;	
			}
		}
		.coupon-list{
			&::before{
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 12px;
				content: "";
				display: block;
				background: url(../../static/image/index/add_images/sc-couLno.png);
				background-size: contain;
				background-repeat: no-repeat;
			}
		}
		.coupon-pos{
			position: absolute;
			width: 90upx;
			height: 90upx;
			right: 22upx;
			bottom: 26upx;
		}
	}
	.coupon{
		width: 100%;
		&-con{
			padding:40upx 30upx;
			box-sizing: border-box;
		}
		&-cat{
			position:relative;
			margin-bottom: 20upx;
		}
		&-list_rightTitle-btn{
			padding: 13upx 33upx;
			background:linear-gradient(90deg,rgba(253,115,119,1),rgba(255,39,65,1));
			color: #FFFFFF;
			font-size: 24upx;
			border-radius:40upx;
		}
		&-list_rightTitle-text{
			color: #FF2741;
			font-size: 20upx;
		}
		&-hide{
			width: 100%;
			padding: 27upx 0 27upx 41upx;
			background-color: #FFFDFD;
			box-sizing: border-box;
			p{
				font-size: 20upx;
				color: #656565;
				display: flex;
				align-items: center;
				margin-bottom: 10upx;
				&::before{
					content: "";
					display: inline-block;
					width: 5upx;
					height: 5upx;
					border-radius: 50%;
					background-color: #333333;
					margin-right: 10upx;
				}
			}
		}
		&-list{
			width: 100%;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			padding: 30upx 22upx 27upx 0;
			border-radius: 10upx;
			box-sizing: border-box;
			position: relative;
			&::before{
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 12px;
				content: "";
				display: block;
				background: url(https://jy-shops.oss-cn-beijing.aliyuncs.com/client/image/add_images/sc-couL.png);
				background-size: contain;
				background-repeat: no-repeat;
			}
		}
		&-list_pass{
			&::after{
				position: absolute;
				right: 0;
				bottom: 0;
				content: "";
				display: block;
				width: 85upx;
				height: 79upx;
				background: url(https://jy-shops.oss-cn-beijing.aliyuncs.com/client/image/add_images/sc-couicon.png);
				background-repeat: no-repeat;
				background-size: cover;
			}
		}
		&-list_rightTitle{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		&-list_righttext{
			font-size: 20upx;
			display: block;
			color: #999999;
			height:45upx;
			overflow: hidden;
		}
		&-list_rightTitle-left{
			display: flex;
			align-items: center;
			text{
				display: block;
				font-size: 20upx;
				color: #999999;
				margin-right: 10upx;
			}
			image{
				width: 22upx;
				height: 12upx;
			}
		}
		&-list_rightImg{
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			text{
				font-size: 26upx;
				color: #333333;
				display: block;
				height:70upx;
				line-height: 35upx;
				width: 100%;
				overflow: hidden;
			}
			image{
				width: 36upx;
				height: 36upx;
				display: block;
			}
		}
		&-text{
			height: 100%;
			width: 2%;
			border-right: 2upx dashed #F0EEEE;
			display: block;
			position: absolute;
			left: 32%;
			&::after{
				content: "";
				display: block;
				width: 40upx;
				height: 40upx;
				border-radius: 50%;
				background-color: #F9F9F9;
				position: absolute;
				top: -10px;
				left: -37.5%;
			}
			&::before{
				content: "";
				display: block;
				width: 40upx;
				height: 40upx;
				border-radius: 50%;
				background-color: #F9F9F9;
				position: absolute;
				bottom: -10px;
				left: -37.5%;
			}
		}
		&-list_left{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 35%;
			height: 100%;
			.one{
				font-size: 60upx;
				color: #FF2842;
				font-weight: bold;
				display: block;
				text-align: center;
				&::before{
					content: "￥";
					font-size: 48upx;
				}
			}
			.two{
				font-size: 22upx;
				color: #FF2842;
				margin-top: 33upx;
				display: block;
				text-align: center;
			}
		}
		&-list_right{
			padding-left: 5%;
			width: 60%;
		}
	}
	.coupon-top{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:40upx 30upx;
		box-sizing: border-box;
		text{
			font-size: 28upx;
			color: #333333;
		}
		image{
			width: 28upx;
			height: 28upx;
		}
	}
</style>
